// 底部导航部件
import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/page_screen.dart';
import 'pages/airplay_screen.dart';



// 创建动态的部件方法
class bottomNavigationWidget extends StatefulWidget {
  _bottomNavigationWidgetState createState() => _bottomNavigationWidgetState();
}

class _bottomNavigationWidgetState extends State<bottomNavigationWidget> {
  final _bottomColor = Colors.green; //声明颜色变量
  List<Widget> pageList = List(); //定义一个组件的list, 后面的List()啥意思？？？
  int _index = 0;
  @override

  // 重写initstate方法
  void initState() {  //可以理解为vue里面的data
    pageList
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PageScreen())
      ..add(AirplayScreen());
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('底部导航案例'),
      // ),
      body: pageList[_index], //显示的内容部件
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home, //icon图标
              color:_bottomColor //图标颜色
            ),
            title: new Text('Home',style: TextStyle(color: _bottomColor),),
             //文字
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.email, //icon图标
              color:_bottomColor //图标颜色
            ),
            title: new Text('Email',style: TextStyle(color: _bottomColor)) //文字
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.pages, //icon图标
              color:_bottomColor //图标颜色
            ),
            title: new Text('Pages',style: TextStyle(color: _bottomColor)) //文字
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.airplay, //icon图标
              color:_bottomColor //图标颜色
            ),
            title: new Text('Airplay',style: TextStyle(color: _bottomColor)) //文字
          ),
        ],
        onTap: (int index){ //在底部导航部件有一个onTab的点击事件
          setState(() { //设置索引为当前点击的索引
            _index = index;
          });
        },
        currentIndex: _index, //当前的索引
        type:BottomNavigationBarType.fixed //一开始都显示问题，不加这个，一开始都是图标，选中的才有文字出现
      ),
    );
  }
}